<template>
    <mt-button type="default" :disabled="disable" size="large" v-show="timerVisible">{{limitTime}}{{txtTips}}</mt-button>
</template>
<style lang="less" scoped>

</style>
<script>
    export default{
        props: {
            timerVisible: {
                type: Boolean,
                default: false
            },
            txtTips: {
                type: String,
                default: 's后重新发送'
            },
            limitLongTime: {
                type: String,
                default: '60'
            }
        },
        data(){
            return{
                disable: true,
                limitTime: 60
            }
        },
        created(){
            this.limitTime = this.limitLongTime;
        },
        watch: {
            timerVisible(val){
                let timer;
                if(val){
                   timer = setInterval( () => {
                        this.limitTime--;
                        this.limitTime = this.limitTime < 10 ? `0${this.limitTime}` : this.limitTime;
                        if(this.limitTime <= 0){
                            clearInterval(timer);
                            this.limitTime = this.limitLongTime;
                            this.$emit('limitCancel', true)
                        }
                   },1000)
                }
            }
        },
    }
</script>
